<!-- 1
 * @Description: 首页容器
 * @Autor: WangYuan
 * @Date: 2021-06-10 16:20:52
 * @LastEditors: WangYuan
 * @LastEditTime: 2022-01-27 19:42:52
-->
<template>
  <div class="main">
    <!-- 内容 -->
    <div class="main-body">
      <div class="main-body-content">
        <div class="body">
          <div class="content">
            <el-button size="small f-white bg-theme" @click="addPage">新建页面</el-button>

            <!-- 头部 -->
            <div class="content-head">
              <img class="w45 h45 mr10 radius"
                :src="project.logo.indexOf('https://')!=-1?project.logo:(this.http.ipAddress + project.logo)"
                alt="" />
              <div class="flex-column">
                <div class="flex col-center mb10">
                  <span class="mr8 f15 f-bold">{{ homePage.name }}</span>
                  <div class="p4 r3 bg-theme f13 f-white">首页</div>
                </div>
                <!-- <span class="f14 f-theme pointer" @click="editPage(homePage)"
                    >编辑</span
                > -->
              </div>
            </div>

            <!-- 表格 -->
            <div class="mt30">
              <el-table :data="project.pages" style="width: 100%" :header-cell-style="{
                  background: '#f7f8fa',
                  color: '#323233',
                  fontWeight: 500,
                }">
                <el-table-column prop="name" label="标题">
                  <template slot-scope="scope">
                    <img v-show="scope.row.home" class="h16 w16 mr5"
                      src="https://b.yzcdn.cn/channel-icon/h5-mobile.png" alt="" />
                    <input v-model="scope.row.name" />
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="状态">
                  <template slot-scope="scope"> 已创建 </template>
                </el-table-column>
                <el-table-column prop="remote" label="备注">
                  <template slot-scope="scope">
                    <input v-model="scope.row.remote" />
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <span class="mr5 f-theme pointer" @click="editPage(scope.row.id)">编辑</span>
                    <span class="ml5 mr5 f-theme pointer"
                      @click="setHomePage(scope.row)">设为主页</span>
                    <span class="ml5 mr5 f-theme pointer" @click="copyPage(scope.row)">复制</span>
                    <span class="ml5 mr5 f-theme pointer" v-if="!scope.row.home" @click="delPage(scope.$index)">删除</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//import { mapMutations, mapGetters } from "vuex";
// import { settingProject } from "@/utils/auth";

export default {
  name: "mall",
  watch: {
    project: {
      handler(newval, oldval) {
        this.$store.getters.data().project = newval;
      },
      deep: true,
    },
  },
  created() {
    // 默认设置首页为当前正在构建页面
    //this.setHomePage(this.homePage);
    this.project = this.$store.getters.data().project;
    // console.log(this.project);
    // 利用闭包保存project数据,在刷新时保存
    let temp = this.project;

    // 当页面刷新时，把当前项目数据保存localStorage中
    // window.addEventListener("beforeunload", function (e) {
    //   settingProject(temp);
    // });
  },

  data() {
    return {
      project: {},
    };
  },

  computed: {
    //...mapGetters(["project"]),
    homePage() {
      return this.project.pages.find((page) => page.home);
    },
  },

  methods: {
    //...mapMutations(["setHomePage"]),
    addPage() {
      let page = {
        id: this.$getRandomCode(4),
        name: "新增页面",
        componentList: [],
        home: false,
      };
      this.project.pages.push(page);
    },
    // 复制页面
    copyPage(data) {
      let page = this.$cloneDeep(data);

      page.id = this.$getRandomCode(4);
      page.home = false;

      this.project.pages.push(page);
    },
    // 删除页面
    delPage(index) {
      this.project.pages.splice(index, 1);
    },
    // 编辑页面
    editPage(id) {
      //console.log("编辑页面");
      //console.log(this.project.pages);
      // console.log(JSON.stringify(data));
      // console.log(id);
      // console.log("点击编辑", id);
      let page = this.project.pages.find((page) => page.id == id);
      // console.log("page", page);

      //this.setCurPage(page);
      //console.log("page",page)
      this.$store.getters.data().CurPage = page;
      // console.log("取值", this.$store.getters.data().CurPage);
      // this.$router.push({ name: "PageBuild" });
      this.$emit("upRout", 3);
      localStorage.setItem('mallDataList',JSON.stringify(this.project.pages))
    },
    // 设置主页
    setHomePage(data) {
      //console.log(data)
      this.project.pages.forEach((page) => (page.home = false));
      data.home = true;
      // this.$forceUpdate();
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  height: 100vh; /*no*/
  background: #f7f8fa;

  .main-body {
    flex: 1;

    .main-body-content {
      position: relative;
      height: calc(100% - 60px); /*no*/
      margin-top: 4px;
      overflow: hidden;
    }
  }
}

.main-meau {
  width: 120px; /*no*/
  height: 100%;
  padding-top: 16px; /*no*/
  border-right: 1px solid #ebedf0; /*no*/
  // background: #22242f;
  background: #fff;

  .main-meau-item {
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 14px; /*no*/
    padding: 11px 20px;
    color: #7d7e80;
    cursor: pointer;

    i {
      margin-right: 5px;
      font-size: 18px; /*no*/
      color: #7d7e80;
    }
  }

  .active {
    i {
      color: #155bd4 !important;
    }
    .main-meau-item {
      position: relative;
      color: #155bd4 !important;

      &::after {
        position: absolute;
        top: 10px; /*no*/
        right: 10px; /*no*/
        content: "";
        width: 4px; /*no*/
        height: 21px; /*no*/
        border-radius: 3px; /*no*/
        background: #155bd4;
      }
    }
  }
}

input {
  border: 0;
  font-size: 13px; /*no*/
}

.body {
  padding: 15px; /*no*/

  .content {
    width: 100%; /*no*/
    height: 700px; /*no*/
    padding: 40px 20px; /*no*/
    background: #fff;

    .content-head {
      display: flex;
      align-items: flex-start;
      padding: 20px 30px; /*no*/
      margin-top: 15px;
      background: #f7f8fa;
    }
  }
}
</style>
